<template>
  <div class="tabs-wrap">
      <div class="tabs-nav">
          <nav>
              <div 
               v-for='(item,index) in navs'
               :key='index'
               @click="change(index)"
              >
              {{item}}
              </div>
          </nav>
      </div>
      {{activeIndex}}
      <div class="tabs-content">
          <slot></slot>
      </div>
  </div>
</template>

<script>
export default {
   name:'tabs',
   data(){
       return {
           navs:[],
           activeIndex:0
       }
   },
   mounted(){

    this.navs=this.$children.map((item,index)=>{ 
        item.index=index;
        console.log(item)
        return item.title});

   },
   methods:{
       change(index){
       this.activeIndex=index;
   }
   }
   
}
</script>

<style>

</style>